<template>
	<view class="container">
		<jy-quick-btns></jy-quick-btns>
		
		<!-- 开始内容区域 -->
		<view v-for="item in itemList" :key='item.id'>
			<view class="exam">
				<view class="exam-types">
					<text v-if="item.type_id == 0">单选题</text>
					<text v-else-if="item.type_id == 1">多选题</text>
					<text v-else>判断题</text>
					<text>{{idx}}</text>
					<text>/</text>
					<text>{{ questions.length }}</text>
				</view>

				<view class="exam-context">
					<text>{{ item.title}}</text>
				</view>
				<!-- 单选和判断 -->
				<radio-group class="exam-radio" v-if="item.type_id == 0 || item.type_id == 2" name='answers'
					@change="(e) => radioChange(e, item.id,item.type_id)">
					<label v-for="(item1,index) in item.options" :key='index' v-if="item1!=''">
						<radio :value="index +':'+ item1" :checked="item.answer1==item1?true:false" />
						<text>{{ options[index] }}.{{item1}}</text>
					</label>
				</radio-group>
				<!-- 多选 -->
				<checkbox-group v-if="item.type_id == 1" @change="(e) => checkChange(e, item.id,item.type_id)">
					<label class="checkboxItem" v-for="(item2,index2) in item.options" :key='index2'>
							<checkbox :value="index2 +':'+ item2.answer" :checked="(item.answer1.indexOf(item2.answer) > -1) ?true:false" />
						<text>{{ options[index2]}}.{{item2.answer}}</text>
					</label>
				 </checkbox-group>
			</view>
			<view>
				<view class="submit" :disabled="disable" @click="submit1">交卷</view>
			</view>
			
			<!-- 遮罩层 -->
			<view class="mask" v-show='mask' @click='hideMask'></view>


			<!-- 考试底部 -->
			<view class="floor">

				<view class="floor-top">
					<view class="floor-top-left" @click="prevTi(item.id)">
						<image src="../static/prevPage.png" mode="aspectFit" ></image>
					</view>
					<view class="floor-top-center">
						<uni-countdown color="#FFFFFF" background-color="#333" :show-day="false" :hour="hour" :minute="minute" :second="second"></uni-countdown>
					</view>
					<view class="floor-top-right" @click="nextTi(item.id)">
						<image src="../static/nextPage.png" mode="aspectFit" ></image>
					</view>
				</view>



				<view class="floor-bottom">

					<view class="floor-bottom-left" @click="prevTi(item.id)">上一题</view>
					<view class="floor-bottom-center" @click="picker">全部</view>
					<view class="floor-bottom-right" @click="nextTi(item.id)">下一题</view>
				</view>
				
				
				<scroll-view scroll-y="true" class="beall" v-show="beall" style="height: 600upx;">
					<view class="item1" v-for="(item3,index3) in questions1" :key='index3' @click="goOneQuestion(index3)">
						<text style="margin-right: 20upx;">{{ index3+1 }}. {{item3.title}}</text>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="password-input" v-if="passwordshow">
			<input type="password" v-model='passwordText'  placeholder="请输入考试密码"/>
			<button type="primary" @click="inputpw">确定</button>
		</view>
		<view class="password-input" v-if="payshow">
			<view style="color: red;">
				考试费用：¥{{price}}
			</view>
			<button type="primary" @click="pay">去支付</button>
		</view>
	</view>
</template>

<script>
	import {checkUserinfo} from '@/request/checkUserinfo'
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
	export default {
		components: {uniCountdown},
		data() {
			return {
				options :['A','B','C','D','E','F','G'],
				id: '',//试卷ID
				class_id:1,
				exam_id:'',
				uid:'',
				duration:0,//秒
				questions: [],//本套题数组
				questions1:[],
				disable:true,
				itemList: [],//一道题
				firstQ_id: '',//首题ID
				secondQ_id: '',
				type_id: 0,
				idx: 0,
				judgeList: [{
					op: 'A',
					text: '正确'
				}, {
					op: 'B',
					text: '错误'
				}],
				radioVal: '', 
				checkedId: 0,
				answers: [],//答案新数组
				checkedAnswer: '',
				aw: {},
				exam_id: 0,
				submitState: false,
				newArr: [],
				hour:0,
				minute: 0, //倒计时分钟
				seconds: 0, //秒数
				beall:false ,//弹出层
				mask:false ,//遮罩
				t1:'',
				t2:'',
				passwordshow:false,
				passwordText:'',
				realpassword:'',
				payshow:false,
				price:'',
				jsonitem:'',
				diylink:''
			};
		},
		onShareAppMessage(res) {
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			let base_set = uni.getStorageSync('base_set')
			if (userinfo.uid == '' || !userinfo.uid) {
				uni.navigateTo({
					url: '../login/login'
				})
				return {
					title: '请先登录后再分享给好友',
					path: ''
				}
			} else {
				if (res.from === 'button') {

				}
				return {
					title: base_set.title,
					path: `${path_share}?pid=${userinfo.uid}`
				}
			}
		},
		onLoad(e) {
			let userinfo = uni.getStorageSync('userinfo');
			if(userinfo){
				this.uid = userinfo.uid;
			}
			console.log(e.item)
			this.jsonitem = e.item
			let item= JSON.parse(e.item)
			console.log(item)
			this.id = item.shijuan_id
			this.class_id = item.class_id
			this.exam_id = item.id
			this.minutes = item.minute
			this.realpassword = item.password
			this.price = item.price
			if(item.type==2){
				this.passwordshow=true
			}else{
				this.passwordshow=false
			}
			if(item.type==1 && item.is_pay==0){
				this.payshow=true
			}else{
				this.payshow=false
			}
			this.getexamItem()
			// this.add()
			this.formatSecToStr(this.minutes*60)
		},
		onShow() {
			checkUserinfo()
			this.t2=setInterval(()=>{
				this.duration++;
			},1000);
		},
		onUnload() {
			clearInterval(this.t1)
		},
		onHide(){
			clearInterval(this.t1)
		},
		methods: {
			pay(){
				uni.navigateTo({
					url: `/pages/confirm-order-form/confirm-order-form?item=${this.jsonitem}&goodstype=exam1`
				})
			},
			inputpw(){
				if(this.passwordText == this.realpassword){
					this.passwordshow = false
				}else{
					uni.showToast({
						title:'密码错误',
						icon:'error'
					})
				}
			},
			formatSecToStr(seconds){
				let daySec = 24 *  60 * 60;
				let hourSec=  60 * 60;
				let minuteSec=60;
				let dd = Math.floor(seconds / daySec);
				let hh = Math.floor((seconds % daySec) / hourSec);
				let mm = Math.floor((seconds % hourSec) / minuteSec);
				let ss=seconds%minuteSec;
				if(dd > 0){
				
				}
				if(hh > 0){
				this.hour=hh
				}
				if (mm > 0){
				this.minute=mm
				}
				if(ss>0){
				this.second=ss
				}
			},
			// 交卷按钮
			submit1(){
				console.log(this.questions)
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL + 'index/exam1/yuejuan',
					data: {
						class_id:1,
						exam_id:this.exam_id,
						shijuan_id:this.id,
						uid:this.uid!=''?this.uid:0,
						duration:this.duration,
						answer_detail:this.questions
					},
					method: 'POST',
					success: (res) => {
						console.log(res)
						if(res.data.msg == '试卷提交成功'){
							uni.showToast({
							    title: '提交成功，得分'+res.data.data+'',
							    duration: 1000,
								success:()=> {
									uni.navigateTo({
										url:'../achievement/achievement1?score=' +res.data.data.score+'&pjf='+res.data.data.pjf+'&diylink='+this.diylink
									})
								}
							});
							
						}
					},
					fail: (res) => {
						console.log(res.data);
					}
				});
			},
			getexamItem() {
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL + 'index/exam1/getShiJuanDetail',
					data: {
						id: this.id
					},
					method: 'POST',
					success: (res) => {
						console.log(res.data)
						this.diylink = res.data.data.diylink
						this.questions = res.data.data.questions
						this.questions1 = res.data.data.questions
						this.questions.forEach((val, index, arr) => {
							val.answer = []
							val.answer1 = []
						})
						uni.setStorageSync(this.id+'_exam',this.questions)
						this.questions = uni.getStorageSync(this.id+'_exam')
						console.log('本套题',this.questions)
						this.itemList = [this.questions[0]]
						console.log('第一道题',this.itemList)
						this.firstQ_id = this.questions[0].id
						this.secondQ_id = this.questions[1].id
					},
					fail: (res) => {
						console.log(res.data);
					}
				});
			},

			// 下一题
			nextTi(id) {
				let qid = id?id:this.idx
				if (this.idx >= this.questions.length) {
					console.log('没有了')
					return false
				}else if(this.idx == 0){
					let obj = {
						...this.aw
					}
					console.log('下一题', this.idx)
					this.itemList = this.questions.slice(this.idx, this.idx + 1)
					this.idx +=1
				}
				 else {
					let obj = {
						...this.aw
					}
					console.log('下一题', this.idx)
					this.itemList = this.questions.slice(this.idx, this.idx + 1)
					this.idx +=1
				}

			},

			// 上一题
			prevTi(id) {
				let qid = id?id:this.idx
				if(this.idx > 1){
					this.idx -=1
					this.submitState = false
					console.log('上一题', this.idx)
					this.itemList = this.questions.slice(this.idx - 1, this.idx)
				}else if(this.idx == 1){
					this.idx -=1
					this.submitState = false
					console.log('上一题', this.idx)
					this.itemList = this.questions.slice(0, 1)
				}
				else{
					console.log('没有了')
					return false
				}
			},
			checkChange(e,id,type_id){
				console.log('题目id',id)
				console.log(e.detail.value)
				this.questions.forEach((val, index, arr) => {
						if(type_id == 1){
							if(val.id == id){
								val.answer = []
								val.answer1 = []
								e.detail.value.forEach((v,i)=>{
									console.log('每一项输出',v)
									var answer_arr =v.split(':')
									val.answer1.push(answer_arr[1])
									val.answer.push({key:answer_arr[0],answer:answer_arr[1]})
								})
							}
						}
				})
				
				uni.setStorageSync(this.id+'_exam',this.questions)
				this.questions = uni.getStorageSync(this.id+'_exam')
				console.log('当前已保存题目带答案',this.questions)
			},
			radioChange(evt, id, type_id) {
				this.radioVal = evt.detail.value
				console.log(id, type_id, evt.detail.value)
				this.checkedId = id
				this.aw.id = id
				this.aw.type_id = type_id
				this.aw.value = evt.detail.value
				console.log(this.aw)
				
				// 单选和判断题把选中的选项赋值给answer
				this.questions.forEach((val, index, arr) => {
					if(val.id == id){
						var answer_arr =evt.detail.value.split(':')
						val.answer1 = answer_arr[1]
						val.answer = answer_arr[0]
					}
				})
				
				uni.setStorageSync(this.id+'_exam',this.questions)
				this.questions = uni.getStorageSync(this.id+'_exam')
				console.log('当前已保存题目带答案',this.questions)
			},
			
			// 弹出层
			picker(){
				console.log(this.questions1)
				this.mask = !this.mask
				this.beall = !this.beall
			},
			hideMask(){
				this.mask = false
				this.beall = false
			},
			goOneQuestion(index){
				console.log(index)
				this.idx = index
				let list1 = this.questions.filter((value,index) =>{
				          return value ;
				        });
				console.log(list1[index]);
				this.itemList = [list1[index]]
			}
		}
	}
</script>

<style lang="less" scoped>
	.container{
		height: 100vh;
		background-color: #fff;
	}
	.password-input{
		position: fixed;
		top:0;
		left:0;
		background: rgba(9,9,9,.6);
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		z-index: 999999;
		input{
			width: 80%;
			height: 60upx;
			background-color: #fff;
			border-radius: 20upx;
			padding: 5upx 10upx;
			margin-bottom: 20upx;
		}
	}
	.exam {
		padding: 30upx 30upx 0;

		&-types {
			font-size: 30upx;
			color: #333;
			display: flex;

			text:nth-child(1) {
				width: 120upx;
				height: 40upx;
				font-size: 30upx;
				color: #fff;
				background-color: #5ca3f8;
				font-weight: 700;
				border-radius: 20upx;
				padding: 5upx;
				text-align: center;
				line-height: 40upx;
				margin-right: 20upx;
			}
		}

		&-context {
			margin-top: 20upx;

			text {
				font-size: 30upx;
				font-weight: 700;
				color: #333;
			}
		}

		&-radio {
			display: flex;
			flex-direction: column;

			label {
				margin-top: 30upx;

				text {
					margin-left: 10upx;
					font-size: 32upx;
					color: #333;
				}
			}
		}
	}


	.floor {
		width: 750upx;
		height: 120upx;
		background-color: #4b89ff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		&-top {
			display: flex;
			justify-content: space-around;

			&-left {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 50upx;
					height: 50upx;
				}

				text {
					font-size: 30upx;
					color: #333;
					margin-left: 10upx;
				}
			}

			&-center {
				font-size: 30upx;
				color: #ff5454;
			}

			&-right {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 50upx;
					height:50upx;
				}

				text {
					font-size: 30upx;
					color: #333;
					margin-left: 10upx;
				}
			}
		}

		&-bottom {
			display: flex;
			justify-content: space-around;
			margin-top: 10upx;
			color: #fff;
			font-weight: 700;
		}
	}


	.submit {
		position: fixed;
		bottom:120upx;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 260upx;
		height: 60upx;
		padding: 10upx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #1E9FFF;
		color: white;
		border-radius: 15upx;
	}
	.bgActive{
		background: #1E9FFF;
	}
	.timer{
		position: absolute;
		top: 500px;
		transform: translate(-50%, -50%);
		width: 40%;
		left: 50%;
		text-align: center;
		.time{
			margin-top: 30upx;
			    color: #ffa900;
			    left: 50%;
			    text-align: center;
			    line-height: 45px;
			    font-size: 30px;
			    border: 2px solid;
		}
	}
	.checkboxItem{
		margin-top: 30upx;
		    display: block;
	}
	.beall{
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			width: 100%;
			background: white;
			position: absolute;
			bottom: 60px;
			left: 0;
			z-index: 99;
			padding: 15px;
			background: #5ca3f8;
			border-top-left-radius: 15px;
			border-top-right-radius: 15px;
			color: white;
			.item1{
				width: 100%;
				height: 25px;
				margin-bottom: 10px;
				font-size: 14px;
				line-height: 25px;
				/* border: 1px solid #fff; */
				-webkit-border-radius: 10px;
				border-radius: 6px;
				padding: 0 10px;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				color: #333;
				background: white;
			}
			// .item:hover{
			// 	background-color: red;
			// 	color: white;
			// }
	}
	
	.mask{
		
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,.5);
	}
</style>
